<template>
    <div class="app-container calendar-list-container" v-loading="loading" element-loading-text="正在导出数据">
    <!-- filter 条件查询 -->
    <div class="filter-container">
      <el-select
        clearable
        v-model="listQuery.workCenter"
        :style="searchInputStyle"
        class="filter-item"
        placeholder="请输入工作中心">
            <el-option
            :value="item"
            :label="item"
            v-for="(item,index) in this.centerList"
            :key="index"/>
      </el-select>
      <el-input
            clearable
            v-model="listQuery.issueLarge"
            :style="searchInputStyle"
            class="filter-item"
            placeholder="请输入问题大类"
      ></el-input>
      <el-input
            clearable
            v-model="listQuery.issueLittle"
            :style="searchInputStyle"
            class="filter-item"
            placeholder="请输入问题小类"
      ></el-input>
      <el-input
            clearable
            v-model="listQuery.issueId"
            :style="searchInputStyle"
            class="filter-item"
            placeholder="请输入缺陷代码"
      ></el-input>
      <el-input
            clearable
            v-model="listQuery.issueIndexes"
            :style="searchInputStyle"
            class="filter-item"
            placeholder="请输入问题索引"
      ></el-input>
      <el-input
            clearable
            v-model="listQuery.responsibility"
            :style="searchInputStyle"
            class="filter-item"
            placeholder="请输入责任环节"
      ></el-input>
      <el-button class="filter-item" type="primary" v-waves icon="el-icon-search" @click="getData">搜索</el-button>
    </div>

    <!-- table 表格 -->
    <el-table  :data="tableInfo" v-loading="loadingList" element-loading-text="给我一首歌的时间" stripe border fit highlight-current-row style="width: 100%">
      <el-table-column  label="序号" type="index" align="center" width="80px"/>
      <el-table-column label="工作中心"  prop="workCenter"   align="center"/>
      <el-table-column label="问题大类"  prop="issueLarge"   align="center"/>
      <el-table-column label="问题小类"  prop="issueLittle"   align="center"/>
      <el-table-column  label="缺陷代码" prop='issueId' align="center" width="100px"/>
      <el-table-column  label="问题索引" prop='issueIndexes' align="center"/>
      <el-table-column  label="责任环节" prop='responsibility' align="center"/>
      <el-table-column  label="问题性质" prop='natureName' align="center"/>
      <el-table-column  label="考核系数" prop='natureCoefficient' align="center"/>
      <!-- 对员工数据进行编辑与删除操作 -->
      <el-table-column  label="操作"  align="center" width="160">
        <template slot-scope="scope" >
              <el-button size="mini" type="primary" @click="handleEdit(scope.row)">修改</el-button>
        </template>
      </el-table-column>
    </el-table>
   
   <!-- pagination 分页 -->
    <div class="pagination-container">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="listQuery.page"
        :page-sizes="[5,10, 20, 30, 40, 100, 300, 500]"
        :page-size="listQuery.limit"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </div>

    <el-divider></el-divider>

    <el-button style="margin-right: 10px" type="success" size="small" @click="hExportExcel">导出数据Excel</el-button>

        <!-- 修改问题信息弹出表单 -->
    <el-dialog title="问题信息修改" :visible.sync="dialogFormVisible" width="700px">
    <el-form :model="modifyform">
      <el-form-item label="工作中心" :label-width="formLabelWidth">
        <el-select
        v-model="modifyform.workCenter"
        placeholder=" "
        style="width:400px">
            <el-option
            :value="item"
            :label="item"
            v-for="(item,index) in this.centerList"
            :key="index"/>
        </el-select>
      </el-form-item>
      <el-form-item label="问题大类" :label-width="formLabelWidth">
        <el-input v-model="modifyform.issueLarge" style="width:400px"/>
      </el-form-item>
      <el-form-item label="问题小类" :label-width="formLabelWidth">
        <el-input v-model="modifyform.issueLittle" style="width:400px" />
      </el-form-item>
      <el-form-item label="缺陷代码" :label-width="formLabelWidth">
        <el-input v-model="modifyform.issueId" :disabled="true" style="width:400px" />
      </el-form-item>
      <el-form-item label="问题索引" :label-width="formLabelWidth">
        <el-input v-model="modifyform.issueIndexes" style="width:400px" />
      </el-form-item>
      <el-form-item label="责任环节" :label-width="formLabelWidth">
        <el-input v-model="modifyform.responsibility" style="width:400px" />
      </el-form-item>
      <el-form-item label="问题性质" :label-width="formLabelWidth">
        <el-select v-model="modifyform.natureName" @focus="fficientFocus" @change="fficientChange" style="width:400px">
            <el-option :value="item.natureId" :label="item.natureName" v-for="(item,index) in this.fficientList" :key="index"/>
        </el-select>
      </el-form-item>
      <el-form-item label="考核系数" :label-width="formLabelWidth">
        <el-input v-model="modifyform.natureCoefficient" disabled style="width:400px" />
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogFormVisible = false">取 消</el-button>
      <el-button type="primary" @click="modifyMachine">确 定</el-button>
    </div>
    </el-dialog>

  </div>
</template>

<script>
import { updIssue, findIssue,findIssueNature } from '../../api/problem'
export default {
    name: 'check_problem',
    data () {
        return {
            listQuery: {
                issueId: '',                              //缺陷代码
                issueLarge: '',                           //问题大类
                issueLittle: '',                          //问题小类
                issueIndexes: '',                          //问题索引
                responsibility: '',                         //责任环节
                page: 1,                                    //页码
                limit: 10                                   //每页多少条记录
            },
            modifyform: {
                issueId: '',                              //缺陷代码
                issueLarge: '',                           //问题大类
                issueLittle: '',                          //问题小类
                issueIndexes: '',                          //问题索引
                responsibility: '',                         //责任环节
            },
            formLabelWidth: '100px',
            searchInputStyle: 'width: 150px;margin-right:15px;',
            total: 0,                                      //数据的总数
            tableInfo: [],
            dialogFormVisible: false,
            loadingList: false,
            loading: false,
            centerList: ['数控车间','装配车间','EMS总装车间','焊接车间','喷涂车间'],
            fficientList: [],
        }
    },
    methods: {
      fficientChange(e){
        this.fficientList.forEach(item =>{
          if(e == item.natureId) {
            this.modifyform.natureCoefficient = item.natureCoefficient
          }
        })
      },
        // 问题性质
        async fficientFocus(){
          const res = await findIssueNature({page: 1, limit: 10000})
          this.fficientList = res.data.list
        },
        getData(){
          this.listQuery.page = 1
          this.listQuery.limit = 10
          this.handleFilter()
        },
        async handleFilter() {
            this.loadingList = true
            let query = Object.assign({},this.listQuery)
            let {data} = await findIssue(query)
            this.total = data.count
            this.tableInfo = data.list
            this.loadingList = false
        },
        handleEdit(item) {
            this.modifyform = Object.assign({},item)
            this.dialogFormVisible = true
        },
        // 将弹框修改后的工段信息传入后台，并且消息提示是否修改成功
        async modifyMachine() {
            this.dialogFormVisible = false
            let query = Object.assign({},this.modifyform)
            query.natureId = this.modifyform.natureName
            delete query.natureName
            delete query.natureCoefficient
            const data = await updIssue(query)
            if(data.code == '1'){
                this.$message({
                  message: '修改成功',
                  type: 'success'
              })
              this.handleFilter()
            } else {
              this.$message({
                  message: '修改失败',
                  type: 'warning'
              })
          }
        },
        // table表单下方的页码组件改变每页显示的数据条数
        handleSizeChange(val) {
          this.listQuery.limit = val
          this.handleFilter()
        },
        // table表单下方的页码组件改变页面
        handleCurrentChange(val) {
          this.listQuery.page = val
          this.handleFilter()
        },
        transformDat(res) {
          const mapInfo = {
            index: '序号',
            issueLarge: '问题大类',
            issueLittle: '问题小类',
            issueId: '缺陷代码',
            issueIndexes: '问题索引',
            responsibility: '责任环节',
            natureName: '问题性质',
            natureCoefficient: '考核系数',
          }
          // 对data进行格式化
          // 取出所有的属性名
          const props = Object.keys(res[0]) // ['id','']
          console.log(props)
          // 将属性名从英文转为中文
          const header = props.map(zhkey => mapInfo[zhkey])
          const data = res.map(obj => Object.values(obj))
          console.log(data)
          return { header, data }
        },
        // 导出excel
        async hExportExcel() {
          this.loading = true
          let query = Object.assign({},this.listQuery)
          query.page = 1
          query.limit = 10000
          let arr = await findIssue(query)
          const { header, data } = this.transformDat(this.setSort(arr.data.list))
            import('@/vendor/Export2Excel').then(excel => {
            // excel表示导入的模块对象
            console.log(excel)
            excel.export_json_to_excel({
            header, // 表头 必填
            data, // 具体数据 必填
            filename: '问题excel', // 文件名称
            autoWidth: true, // 宽度是否自适应
            bookType: 'xlsx' // 生成的文件类型
            })
          })
          this.loading = false
        },
        // 排序函数
        setSort(arr){
          let newArr = JSON.parse(JSON.stringify(arr))
          let arr1 = []
          newArr.forEach((item,index)=>{
            let obj = {
              index: index+1,
              issueLarge: item.issueLarge,
              issueLittle: item.issueLittle,
              issueId: item.issueId,
              issueIndexes: item.issueIndexes,
              responsibility: item.responsibility,
              natureName: item.natureName,
              natureCoefficient: item.natureCoefficient,
          }
          arr1.push(obj)
          })
          return arr1
        },
    },
    // 进入页面获取table信息
    mounted() {
        this.handleFilter()
    }
}
</script>

<style>

</style>